<template>
    <div class="container">
        <el-row>
            <el-card shadow="never">
                <div slot="header">
                    <el-form :inline="true" :model="searchForm" size="small">
                        <el-form-item label="名称" class="el-search-item">
                            <el-input v-model="searchForm.label" placeholder="请输入菜单名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="类型" class="el-search-item">
                            <el-select v-model="searchForm.type" clearable placeholder="请选择菜单类型">
                                <el-option label="目录" value="0"></el-option>
                                <el-option label="菜单" value="1"></el-option>
                                <el-option label="按钮" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="el-search-item">
                            <el-button type="success" plain icon="el-icon-search" @click="getDataList()">查询</el-button>
                        </el-form-item>
                        <el-form-item class="el-search-item">
                            <el-button v-if='hasPerm("sys:menu:expand")' type="danger" plain icon="el-icon-copy-document" @click="openExpand">{{expandWord}}</el-button>
                        </el-form-item>
                        <el-form-item class="el-search-item">
                            <el-button v-if='hasPerm("sys:menu:add")' type="primary" plain icon="el-icon-plus" @click="openAdd">新增菜单</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <!--数据表格-->
                <el-table
                    v-if="refreshTable"
                    v-loading="waitLoading"
                    :data="tableData" style="width: 100%;"
                    :height="tableHeight"
                    :default-expand-all="isExpandAll"
                    ref="multipleTable"
                    row-key="id"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
                    <el-table-column prop="label" label="标题" align="center" width="150"></el-table-column>
                    <el-table-column prop="icon" label="图标" align="center" width="80">
                        <template slot-scope="scope">
                            <i :class="scope.row.icon || ''"></i>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="类型" align="center" width="80">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.type === '0'" size="small" effect="plain">目录</el-tag>
                            <el-tag v-else-if="scope.row.type === '1'" size="small" type="success" effect="plain">菜单</el-tag>
                            <el-tag v-else-if="scope.row.type === '2'" size="small" type="danger" effect="plain">按钮</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="path" label="路由地址" align="center"></el-table-column>
                    <el-table-column prop="name" label="路由名称" align="center"></el-table-column>
                    <el-table-column prop="url" label="vue组件路径" align="center" width="250"></el-table-column>
                    <el-table-column prop="code" label="权限标识" align="center" width="180"></el-table-column>
                    <el-table-column prop="orderNum" label="序号" align="center" width="80">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="plain">{{scope.row.orderNum !== null ? scope.row.orderNum : 0}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column v-if='hasPerm("sys:menu:update") || hasPerm("sys:menu:del")' label="更多操作" align="center" width="150">
                        <template slot-scope="scope">
                            <el-button v-if='hasPerm("sys:menu:update")' @click="openUpdate(scope.row)" size="mini" type="text" icon="el-icon-edit">编辑</el-button>
                            <el-button v-if='hasPerm("sys:menu:del")' @click="deleteFun(scope.row)" size="mini" type="text" icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-dialog title="选择节点" :visible.sync="parentDialogVisible" width="25%" top="5%">
                    <el-tree :data="treeData"
                             :props="treeProps"
                             show-checkbox
                             check-strictly
                             node-key="id"
                             default-expand-all
                             :default-checked-keys="defKeys"
                             ref="treeRef"
                             @check-change="handleNodeClick"
                             empty-text="加载中，请稍后..."
                             style="height: 55vh;overflow: auto;"
                    ></el-tree>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="parentDialogVisible = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="parentDialogVisible = false" size="small">确 定</el-button>
                    </span>
                </el-dialog>

                <el-dialog title="菜单图标" :visible.sync="iconDialogVisible" width="45%" top="5%">
                    <el-row :gutter="5" style="height: 55vh;overflow: auto;">
                        <el-col :span="2" v-for="item in iconData" :key="item">
                            <el-button :icon="item" @click.native="iconFun(item)" circle style="margin-bottom: 5px"></el-button>
                        </el-col>
                    </el-row>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="iconDialogVisible = false" size="small">取 消</el-button>
                    </span>
                </el-dialog>

                <!--新增对话框-->
                <el-drawer
                    :title="dialog.dialogTitle"
                    :visible.sync="dialog.visible"
                    :direction="dialog.direction"
                    :size="size"
                    :before-close="handleClose"
                >
                    <el-row class="drawer-table">
                        <el-col :span="24">
                            <el-form :rules="rules" ref="menuForm" :model="menuForm" size="small" label-width="80px">
                                <el-form-item prop="type" label="菜单类型">
                                    <el-radio-group v-model="menuForm.type">
                                        <el-radio :label="'0'">一级菜单</el-radio>
                                        <el-radio :label="'1'">子菜单</el-radio>
                                        <el-radio :label="'2'">按钮/权限</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item prop="parentName" label="上级菜单">
                                    <el-input @click.native="showAssignDialog(menuForm.parentId)" v-model="menuForm.parentName" placeholder="请选择上级菜单" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="label" label="菜单名称">
                                    <el-input v-model="menuForm.label" placeholder="请输入名称" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="icon" v-if="menuForm.type !== '2'" label="菜单图标">
                                    <el-input @click.native="selectIcon" v-model="menuForm.icon" placeholder="请选择图标" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="name" v-if="menuForm.type === '1'" label="路由名称">
                                    <el-input v-model="menuForm.name" placeholder="请输入路由名称" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="path" v-if="menuForm.type !== '2'" label="路由地址">
                                    <el-input v-model="menuForm.path" placeholder="请输入路由地址" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="url" v-if="menuForm.type === '1'" label="组件路径">
                                    <el-input v-model="menuForm.url" placeholder="请输入vue组件路径" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="code" label="权限代码">
                                    <el-input v-model="menuForm.code" placeholder="请输入权限代码：sys:user:add" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="orderNum" label="菜单排序">
                                    <el-input-number v-model="menuForm.orderNum" auto-complete="off"></el-input-number>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="drawer-footer">
                        <el-col :span="24">
                            <el-button @click="dialog.visible = false" size="small">取 消</el-button>
                            <el-button type="primary" @click="submitFun()" :loading="loading.status" size="small">{{loading.status ? loading.SubText : loading.BtnText}}</el-button>
                        </el-col>
                    </el-row>
                </el-drawer>

            </el-card>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 弹出层大小
            size: '28%',
            // 是否显示树状弹出层
            parentDialogVisible: false,
            // 是否显示icon弹出层
            iconDialogVisible: false,
            // 表格数据
            tableData: [],
            // 表格高度
            tableHeight: 0,
            // 查询参数
            searchForm: {
                label: null,
                type: null
            },
            // 表单参数
            menuForm: {
                id: null,
                label: null,
                parentId: null,
                parentName: null,
                name: null,
                path: null,
                url: null,
                icon: null,
                code: null,
                orderNum: null,
                type: null
            },
            // 弹出层
            dialog:{
                flag: 0,
                dialogTitle: "",
                visible: false,
                direction: 'rtl'
            },
            // 按钮提交文字
            loading: {
                status: false,
                BtnText: '确 定',
                SubText: '提交中...'
            },
            // 表单校验
            rules: {
                type: [{required: true, trigger: "change",  message: "请选择菜单类型"}],
                label: [{required: true, trigger: "change",  message: "请输入菜单名称"}],
                parentName: [{required: true, trigger: "change",  message: "请选择节点"}]
            },
            // 遮罩层
            waitLoading: true,
            // 是否展开，默认全部展开
            isExpandAll: false,
            // 展开折叠默认文字
            expandWord: '展开',
            // 重新渲染表格状态
            refreshTable: true,
            // 所有权限数据
            treeData: [],
            // 树形控件的属性绑定对象
            treeProps: {
                children: 'children',
                label: 'label'
            },
            // 默认选中的节点id值
            defKeys: [],
            // 存储临时图标集合
            iconData: ["el-icon-platform-eleme", "el-icon-eleme", "el-icon-delete-solid", "el-icon-delete", "el-icon-s-tools", "el-icon-setting", "el-icon-user-solid", "el-icon-user", "el-icon-phone", "el-icon-phone-outline", "el-icon-more", "el-icon-more-outline", "el-icon-star-on", "el-icon-star-off", "el-icon-s-goods", "el-icon-goods", "el-icon-warning", "el-icon-warning-outline", "el-icon-question", "el-icon-info", "el-icon-remove", "el-icon-circle-plus", "el-icon-success", "el-icon-error", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-remove-outline", "el-icon-circle-plus-outline", "el-icon-circle-check", "el-icon-circle-close", "el-icon-s-help", "el-icon-help", "el-icon-minus", "el-icon-plus", "el-icon-check", "el-icon-close", "el-icon-picture", "el-icon-picture-outline", "el-icon-picture-outline-round", "el-icon-upload", "el-icon-upload2", "el-icon-download", "el-icon-camera-solid", "el-icon-camera", "el-icon-video-camera-solid", "el-icon-video-camera", "el-icon-message-solid", "el-icon-bell", "el-icon-s-cooperation", "el-icon-s-order", "el-icon-s-platform", "el-icon-s-fold", "el-icon-s-unfold", "el-icon-s-operation", "el-icon-s-promotion", "el-icon-s-home", "el-icon-s-release", "el-icon-s-ticket", "el-icon-s-management", "el-icon-s-open", "el-icon-s-shop", "el-icon-s-marketing", "el-icon-s-flag", "el-icon-s-comment", "el-icon-s-finance", "el-icon-s-claim", "el-icon-s-custom", "el-icon-s-opportunity", "el-icon-s-data", "el-icon-s-check", "el-icon-s-grid", "el-icon-menu", "el-icon-share", "el-icon-d-caret", "el-icon-caret-left", "el-icon-caret-right", "el-icon-caret-bottom", "el-icon-caret-top", "el-icon-bottom-left", "el-icon-bottom-right", "el-icon-back", "el-icon-right", "el-icon-bottom", "el-icon-top", "el-icon-top-left", "el-icon-top-right", "el-icon-arrow-left", "el-icon-arrow-right", "el-icon-arrow-down", "el-icon-arrow-up", "el-icon-d-arrow-left", "el-icon-d-arrow-right", "el-icon-video-pause", "el-icon-video-play", "el-icon-refresh", "el-icon-refresh-right", "el-icon-refresh-left", "el-icon-finished", "el-icon-sort", "el-icon-sort-up", "el-icon-sort-down", "el-icon-rank", "el-icon-loading", "el-icon-view", "el-icon-c-scale-to-original", "el-icon-date", "el-icon-edit", "el-icon-edit-outline", "el-icon-folder", "el-icon-folder-opened", "el-icon-folder-add", "el-icon-folder-remove", "el-icon-folder-delete", "el-icon-folder-checked", "el-icon-tickets", "el-icon-document-remove", "el-icon-document-delete", "el-icon-document-copy", "el-icon-document-checked", "el-icon-document", "el-icon-document-add", "el-icon-printer", "el-icon-paperclip", "el-icon-takeaway-box", "el-icon-search", "el-icon-monitor", "el-icon-attract", "el-icon-mobile", "el-icon-scissors", "el-icon-umbrella", "el-icon-headset", "el-icon-brush", "el-icon-mouse", "el-icon-coordinate", "el-icon-magic-stick", "el-icon-reading", "el-icon-data-line", "el-icon-data-board", "el-icon-pie-chart", "el-icon-data-analysis", "el-icon-collection-tag", "el-icon-film", "el-icon-suitcase", "el-icon-suitcase-1", "el-icon-receiving", "el-icon-collection", "el-icon-files", "el-icon-notebook-1", "el-icon-notebook-2", "el-icon-toilet-paper", "el-icon-office-building", "el-icon-school", "el-icon-table-lamp", "el-icon-house", "el-icon-no-smoking", "el-icon-smoking", "el-icon-shopping-cart-full", "el-icon-shopping-cart-1", "el-icon-shopping-cart-2", "el-icon-shopping-bag-1", "el-icon-shopping-bag-2", "el-icon-sold-out", "el-icon-sell", "el-icon-present", "el-icon-box", "el-icon-bank-card", "el-icon-money", "el-icon-coin", "el-icon-wallet", "el-icon-discount", "el-icon-price-tag", "el-icon-news", "el-icon-guide", "el-icon-male", "el-icon-female", "el-icon-thumb", "el-icon-cpu", "el-icon-link", "el-icon-connection", "el-icon-open", "el-icon-turn-off", "el-icon-set-up", "el-icon-chat-round", "el-icon-chat-line-round", "el-icon-chat-square", "el-icon-chat-dot-round", "el-icon-chat-dot-square", "el-icon-chat-line-square", "el-icon-message", "el-icon-postcard", "el-icon-position", "el-icon-turn-off-microphone", "el-icon-microphone", "el-icon-close-notification", "el-icon-bangzhu", "el-icon-time", "el-icon-odometer", "el-icon-crop", "el-icon-aim", "el-icon-switch-button", "el-icon-full-screen", "el-icon-copy-document", "el-icon-mic", "el-icon-stopwatch", "el-icon-medal-1", "el-icon-medal", "el-icon-trophy", "el-icon-trophy-1", "el-icon-first-aid-kit", "el-icon-discover", "el-icon-place", "el-icon-location", "el-icon-location-outline", "el-icon-location-information", "el-icon-add-location", "el-icon-delete-location", "el-icon-map-location", "el-icon-alarm-clock", "el-icon-timer", "el-icon-watch-1", "el-icon-watch", "el-icon-lock", "el-icon-unlock", "el-icon-key", "el-icon-service", "el-icon-mobile-phone", "el-icon-bicycle", "el-icon-truck", "el-icon-ship", "el-icon-basketball", "el-icon-football", "el-icon-soccer", "el-icon-baseball", "el-icon-wind-power", "el-icon-light-rain", "el-icon-lightning", "el-icon-heavy-rain", "el-icon-sunrise", "el-icon-sunrise-1", "el-icon-sunset", "el-icon-sunny", "el-icon-cloudy", "el-icon-partly-cloudy", "el-icon-cloudy-and-sunny", "el-icon-moon", "el-icon-moon-night", "el-icon-dish", "el-icon-dish-1", "el-icon-food", "el-icon-chicken", "el-icon-fork-spoon", "el-icon-knife-fork", "el-icon-burger", "el-icon-tableware", "el-icon-sugar", "el-icon-dessert", "el-icon-ice-cream", "el-icon-hot-water", "el-icon-water-cup", "el-icon-coffee-cup", "el-icon-cold-drink", "el-icon-goblet", "el-icon-goblet-full", "el-icon-goblet-square", "el-icon-goblet-square-full", "el-icon-refrigerator", "el-icon-grape", "el-icon-watermelon", "el-icon-cherry", "el-icon-apple", "el-icon-pear", "el-icon-orange", "el-icon-coffee", "el-icon-ice-tea", "el-icon-ice-drink", "el-icon-milk-tea", "el-icon-potato-strips", "el-icon-lollipop", "el-icon-ice-cream-square", "el-icon-ice-cream-round"]
        };
    },
    mounted() {
        // 表格动态高度设置
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 205
        })
    },
    created() {
        this.getDataList()
    },
    methods: {
        handleClose(done) {
            this.resetForm()
            done()
        },
        // 表格展开折叠
        openExpand() {
            this.refreshTable = false
            this.isExpandAll = !this.isExpandAll
            if(this.isExpandAll === false) {
                this.expandWord = '展开'
            }else {
                this.expandWord = '折叠'
            }
            this.$nextTick(() => {
                this.refreshTable = true;
            });
        },
        // 展示菜单权限对话框
        showAssignDialog(parentId) {
            this.getTreeData()
            // 默认选中根节点
            this.defKeys = [parentId]
            this.parentDialogVisible = true
        },
        // 获取所有权限信息
        getTreeData() {
            this.$api.menu.listTree().then(res => {
                if(res.data.code === 2000){
                    this.treeData = res.data.data
                }
            })
        },
        // 树组件单选实现
        handleNodeClick(data, checked) {
            if(checked === true) {
                if(this.menuForm.id === data.id) {
                    this.$message.warning("注意：禁止相同节点编辑，请选择其它节点")
                    return
                }else {
                    this.menuForm.parentName = data.label
                    this.menuForm.parentId = data.id
                }
                this.$refs.treeRef.setCheckedKeys([data.id]);
            } else {
                if (this.menuForm.parentId === data.id) {
                    this.$refs.treeRef.setCheckedKeys([data.parentId]);
                }
            }
        },
        // 弹出icon选择
        selectIcon() {
            this.iconDialogVisible = true
        },
        // 获取菜单列表
        getDataList() {
            this.waitLoading = true
            this.$api.menu.list({
                label: this.searchForm.label,
                type: this.searchForm.type
            }).then(res => {
                if(res.data.code === 2000){
                    this.tableData = res.data.data
                    this.waitLoading = false
                }
            })
        },
        // 添加按钮操作
        openAdd() {
            this.menuForm.parentId = null
            this.dialog.flag = 0
            this.resetForm("menuForm")
            this.dialog.dialogTitle = "新增菜单"
            this.dialog.visible = true
        },
        // 更新按钮操作
        openUpdate(row) {
            this.dialog.flag = 1
            this.resetForm("menuForm")
            this.dialog.dialogTitle = "编辑菜单"
            this.dialog.visible = true
            this.getById(row.id)
        },
        // 保存/更新数据操作
        submitFun() {
            this.$refs.menuForm.validate(valid => {
                if(valid){
                    this.loading.status = true
                    this.$api.menu.saveOrUpdate(this.menuForm,this.dialog.flag).then(res => {
                        if (res.data.code === 2000) {
                            this.$message.success(res.data.msg)
                            this.getDataList()
                            this.dialog.visible = false
                            this.loading.status = false
                        }else{
                            this.$message.error(res.data.msg)
                            this.loading.status = false
                            return false
                        }
                    })
                }
            })
        },
        // 删除数据操作
        deleteFun(row) {
            this.$confirm("确定删除吗？", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: 'error'
            }).then(() =>{
                this.$api.menu.remove(row.id).then(res => {
                    if(res.data.code === 2000){
                        this.$message.success(res.data.msg)
                        this.getDataList()
                    }else {
                        this.$message.error(res.data.msg)
                    }
                })
            }).catch(() => {
                this.$message.info("取消删除")
            });
        },
        // 根据id获取数据
        getById(id) {
            this.$api.menu.getById(id).then(res => {
                if (res.data.code === 2000) {
                    this.menuForm = res.data.data
                }
            })
        },
        // 选中icon操作
        iconFun(value) {
            this.menuForm.icon = value
            this.iconDialogVisible = false
        },
        // 清空表单
        resetForm(formName) {
            this.menuForm.path = null
            this.menuForm.url = null
            if (this.$refs[formName]) {
                this.$refs[formName].resetFields()
            }
        }
    }
};
</script>

<style lang="less" scoped>
.el-search-item {
    margin-bottom: 0;
}
.el-card/deep/.el-card__body {
    padding: 0 10px 20px 10px !important;
}
.el-card/deep/.el-card__header {
    border-bottom: none !important;
}

</style>
